import React from 'react';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import HOCSelect from '@/components/AntDesign/Select';
import { Row, Col, Input, Select, Button, Divider } from 'antd';

const FormItem = Form.Item;
const { Option } = Select;
class BasicForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listIndex: 0,
      invoiceList: [],
      isRequiredForm: [true],
    };
  }

  componentDidMount = () => {
    this.add();
  };

  // 新增数据
  add = () => {
    const { invoiceList, listIndex, isRequiredForm } = this.state;
    const newData = invoiceList.map(item => ({ ...item }));
    newData.push({
      id: `list_${listIndex}`,
      isRequired: true,
      vatCoprName: '增值税单位名称',
      taxerType: '发票类型',
      taxerIdNo: '纳税人识别号',
      openBank: '开户行',
      bankAcco: '银行账号',
      invPhone: '开票电话',
      invArea: '开票地址',
      remark: '备注',
    });
    this.state.listIndex += 1;
    const cRequiredForm = isRequiredForm;
    cRequiredForm.push(true);
    this.setState({ invoiceList: newData, isRequiredForm: cRequiredForm });
  };

  // 删除数据
  delList = id => {
    const { invoiceList } = this.state;
    const newData = invoiceList.filter(item => item.id !== id);
    this.setState({ invoiceList: newData });
  };

  // 选择发票类型
  selectTaxerType = (value, id) => {
    const { invoiceList } = this.state;
    const newData = invoiceList;
    newData.forEach(item => {
      const newItem = item;
      if (item.id === id && Number(value.key) === 1) {
        newItem.isRequired = true;
      } else if (item.id === id && Number(value.key) !== 1) {
        newItem.isRequired = false;
      }
    });
    this.setState({ invoiceList: newData });
  };

  render() {
    const {
      form: { getFieldDecorator },
      taxerTypeList,
    } = this.props;
    const { invoiceList } = this.state;
    const xl = { span: 8 };
    const lg = { span: 8 };
    const md = { span: 8 };
    const sm = 24;
    const colProps = { xl, lg, md, sm };

    // 下拉选项
    // 发票类型
    const taxerTypeOL = taxerTypeList.map(options => (
      <Option key={options.itemCode}>{options.itemName}</Option>
    ));
    return (
      <Form layout="vertical">
        {invoiceList.map((invoiceData, index) => (
          <div key={invoiceData.id}>
            {index ? <Divider /> : ''}
            <Row gutter={64}>
              <Col {...colProps}>
                <FormItem label={invoiceData.vatCoprName}>
                  {getFieldDecorator(`vatCoprName_${invoiceData.id}`, {
                    rules: [{ required: true, message: '请输入' }],
                  })(<Input placeholder="请输入" maxLength="100" />)}
                </FormItem>
              </Col>
              <Col {...colProps}>
                <FormItem label={invoiceData.taxerType}>
                  {getFieldDecorator(`taxerType_${invoiceData.id}`, {
                    rules: [{ required: true, message: '请选择' }],
                  })(
                    <HOCSelect
                      placeholder="请选择"
                      labelInValue
                      showSearch
                      optionFilterProp="children"
                      onChange={value => this.selectTaxerType(value, invoiceData.id)}
                    >
                      {taxerTypeOL}
                    </HOCSelect>
                  )}
                </FormItem>
              </Col>
              <Col {...colProps}>
                <FormItem label={invoiceData.taxerIdNo}>
                  {getFieldDecorator(`taxerIdNo_${invoiceData.id}`, {
                    rules: [
                      {
                        required: true,
                        message: '最大长度不超过18的数字与字母组合',
                        pattern: /^[A-Za-z0-9]{1,20}$/,
                      },
                    ],
                  })(<Input placeholder="请输入" maxLength="18" />)}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={64}>
              <Col {...colProps}>
                <FormItem label={invoiceData.openBank}>
                  {getFieldDecorator(`openBank_${invoiceData.id}`, {
                    rules: [{ required: invoiceData.isRequired, message: '请输入' }],
                  })(<Input placeholder="请输入" maxLength="100" />)}
                </FormItem>
              </Col>
              <Col {...colProps}>
                <FormItem label={invoiceData.bankAcco}>
                  {getFieldDecorator(`bankAcco_${invoiceData.id}`, {
                    rules: [
                      {
                        required: invoiceData.isRequired,
                        message: '最大长度不超过25位数字',
                        pattern: /^\d{1,25}$/,
                      },
                    ],
                  })(<Input placeholder="请输入" maxLength="25" />)}
                </FormItem>
              </Col>
              <Col {...colProps}>
                <FormItem label={invoiceData.invPhone}>
                  {getFieldDecorator(`invPhone_${invoiceData.id}`, {
                    rules: [
                      {
                        required: invoiceData.isRequired,
                        message: '固话或手机',
                        pattern: /^(\(\d{3,4}\)|\d{3,4}-|\s)?\d{7,14}$/,
                      },
                    ],
                  })(<Input placeholder="请输入" maxLength="12" />)}
                </FormItem>
              </Col>
            </Row>
            <Row gutter={64}>
              <Col {...colProps}>
                <FormItem label={invoiceData.invArea}>
                  {getFieldDecorator(`invArea_${invoiceData.id}`, {
                    rules: [{ required: invoiceData.isRequired, message: '请输入' }],
                  })(<Input placeholder="请输入" maxLength="100" />)}
                </FormItem>
              </Col>
              <Col {...colProps}>
                <FormItem label={invoiceData.remark}>
                  {getFieldDecorator(`remark_${invoiceData.id}`, {
                    rules: [{ required: false, message: '请输入' }],
                  })(<Input placeholder="请输入" maxLength="200" />)}
                </FormItem>
              </Col>
              <Col {...colProps} style={{ textAlign: 'center' }}>
                {index > 0 && (
                  <Row>
                    <Col {...colProps} />
                    <Col {...colProps} />
                    <Col {...colProps} style={{ textAlign: 'center' }}>
                      <DeleteOutlined
                        className="dynamic-delete-button"
                        style={{ fontSize: '20px', lineHeight: '85px' }}
                        onClick={() => this.delList(invoiceData.id)}
                      />
                    </Col>
                  </Row>
                )}
              </Col>
            </Row>
          </div>
        ))}
        <Button
          style={{ width: '100%', marginBottom: 8 }}
          type="dashed"
          icon={<PlusOutlined />}
          onClick={this.add}
        >
          新增发票信息
        </Button>
      </Form>
    );
  }
}
const BasicFormList = Form.create()(BasicForm);
export default BasicFormList;
